﻿/// <reference path="theme.scss" />

//
// Accordion
// --------------------------------------------------

.accordion {
    padding-bottom: 1px;

    .card + .card {
        margin-top: -1px;
    }

    .card-title {
        margin: 0;
        position: relative;

        .collapse-chevron {
            font-size: 14px;
            margin-right: 1rem;
            opacity: 0.6;
            transition: transform 0.35s;
        }

        .card-title-link {
            position: relative;
            text-decoration: none;
            font-weight: $font-weight-bold;
            font-size: 1.125rem;
            display: block;
            padding: 1.25rem;
            display: inline-flex;
            align-items: center;
            width: 100%;
            transition: background-color 0.25s, color 0.25s;

            &.collapsed {
                background-color: $card-cap-bg;
                color: inherit;

                &:hover {
                    background-color: $gray-200;
                }
            }

            &:not(.collapsed) {
                background-color: $success;
                color: #fff;

                .collapse-chevron {
                    opacity: 1;
                    transform: rotate(-180deg);
                }
            }
        }

        .hint {
            display: inline-block;
            font-size: 0.85rem;
            font-weight: $font-weight-normal;
            opacity: 0.6;
            line-height: 1.5;
        }
    }

    .card-header {
        padding: 0;
        background-color: transparent;
        cursor: pointer;
    }

    .card-body > *:last-child {
        margin-bottom: 0 !important;
    }
    
    .card,
    .card .card-header { 
        border-radius: 0;
    }

    .card:first-child,
    .card:first-child .card-header,
    .card:first-child .card-title-link { 
        border-top-left-radius: $border-radius;  
        border-top-right-radius: $border-radius;
    }

    .card:last-child,
    .card:last-child .card-header{ 
        border-bottom-left-radius: $border-radius;  
        border-bottom-right-radius: $border-radius;
    }

    .card:last-child .card-header{ 
        border-bottom-width: 0;
    }
    
    .card:first-of-type {
        border-bottom: $card-border-width solid $card-border-color;

        :not(:last-of-type) {
            border-bottom: 0 !important;
        }
    }
}
